/**
 * @description Description
 *
 * @author Candy <candy.yan@motionglobal.com>
 * @date  Creation Date 2018/8/10
 */

function caleSliderViewNum() {
	var sliderViewNum, tid;
	var bodyWidth = parseInt($('body').width());
	$('.swiper-scrollbar-cover').width(0);
	$('.slider-bar-wrapper .swiper-scrollbar-drag').css({'background-color': '#ccc'});
	switch (true) {
		case parseInt(bodyWidth) >= 1224:
			sliderViewNum = 4;
			break;
		case parseInt(bodyWidth) > 812 && parseInt(bodyWidth) <= 1223:
			sliderViewNum = 3;
			break;
		case parseInt(bodyWidth) <= 812:
			sliderViewNum = 2;
			break;
		default:
			sliderViewNum = 4;
			break;
	}
	var swiper = new Swiper('#vape-kit-slide', {
		navigation: {
			nextEl: '#vape-kit-slide .swiper-button-next',
			prevEl: '#vape-kit-slide .swiper-button-prev',
		},
		watchSlidesProgress: true,
		watchSlidesVisibility : true,
		slidesPerView : sliderViewNum,
		scrollbar: {
			el: '#vape-kit-slide .swiper-scrollbar',
			dragSize: 30,
			draggable: true,
		},
		on:{
			slideChange: function () {
				var swiperScrollbarCover = $('#vape-kit-slide .swiper-scrollbar-cover');
				var sliderWrapperWidth = $('#vape-kit-slide .slider-bar-wrapper').width();
				var sliderBlockNum = $('#vape-kit-slide .swiper-slide').length - sliderViewNum;
				swiperScrollbarCover.css({'width': (sliderWrapperWidth / sliderBlockNum) * this.activeIndex + 'px'});
				if (this.activeIndex == 0) {
					$('#vape-kit-slide .swiper-scrollbar-drag').css({'background-color': '#ccc'})
				} else {
					$('#vape-kit-slide .swiper-scrollbar-drag').css({'background-color': '#50b0ac'})
				}
			},
		}
	});
	var swiper2 = new Swiper('#flavors-slide', {
		navigation: {
			nextEl: '#flavors-slide .swiper-button-next',
			prevEl: '#flavors-slide .swiper-button-prev',
		},
		watchSlidesProgress: true,
		watchSlidesVisibility : true,
		slidesPerView : sliderViewNum,
		scrollbar: {
			el: '#flavors-slide .swiper-scrollbar',
			dragSize: 30,
			draggable: true,
		},
		on:{
			slideChange: function () {
				var swiperScrollbarCover = $('#flavors-slide .swiper-scrollbar-cover');
				var sliderWrapperWidth = $('#flavors-slide .slider-bar-wrapper').width();
				var sliderBlockNum = $('#flavors-slide .swiper-slide').length - sliderViewNum;
				swiperScrollbarCover.css({'width': (sliderWrapperWidth / sliderBlockNum) * this.activeIndex + 'px'});
				if (this.activeIndex == 0) {
					$('#flavors-slide .swiper-scrollbar-drag').css({'background-color': '#ccc'})
				} else {
					$('#flavors-slide .swiper-scrollbar-drag').css({'background-color': '#50b0ac'})
				}
			},
		}
	});
}
(function(win) {
	caleSliderViewNum();
	win.addEventListener('resize', function() {
		clearTimeout(tid);
		tid = setTimeout(caleSliderViewNum, 300);
	}, false);
	win.addEventListener('pageshow', function(e) {
		if (e.persisted) {
			clearTimeout(tid);
			tid = setTimeout(caleSliderViewNum, 300);
		}
	}, false);
})(window);


